<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>五星好评</title>
    <style>
        body{
            /*文字大小12px 1.5倍的行间距  arial 一种字体*/
            font-size: 12px/1.5 arial;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 700px;
            margin: 10px auto;
            position: relative;
        }
        #star span,
        #star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(img/star.png);
            background-repeat: no-repeat;
        }
        #star li.on{
            background-position: 0 -28px;
        }
        #star p{
            position: absolute;
            top: 20px;
            /*background-color: pink;*/
        }
        #star p em{
            display: block;       
            font-style: normal;
            color: #f60;     
        }
        strong{
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="star">
        <span>点击星星评分</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--显示最终的评分结果-->
        <span></span>
        <!--点击某一个星星时显示评分评语-->
        <p></p>
    </div>
</body>
</html>
<script>
    window.onload=function(){
        var star=document.querySelector('#star');
        var ali=star.getElementsByTagName('li');
        var span=star.getElementsByTagName('span')[1];
        var p=star.getElementsByTagName('p')[0];
        var ul=star.getElementsByTagName('ul')[0];
        var msg=[
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ];
        // split('|')  通过指定的字符分割字符串  返回一个数组
        // console.log(msg[0].split('|')[0]);
        for(var i=0;i<ali.length;i++){
            // 记录每一个索引值
            ali[i].index=i;
            // 当鼠标进来时显示对应的星星
            ali[i].onmouseover=function(){
                showStar(this.index+1);
                // 显示评语 及评分
                p.innerHTML='<em><b>'+(this.index+1)+'</b>分'+
                            msg[this.index].split('|')[0]+'</em>'+
                            msg[this.index].split('|')[1];
                // /改变p标签的位置
                p.style.left=ul.offsetLeft+this.offsetWidth*this.index+'px';
            }
            // 点击li标签之后对评分进行处理
            ali[i].onclick=function(){
                // 当点击第几个li标签时，isStar的值就是几
                isStar=this.index+1;
                // 清空p标签的内容
                p.innerHTML='';
                // 显示右侧最终的评语
                span.innerHTML='<strong>'+isStar+'分</strong>('+
                            msg[this.index].split('|')[1]+')';
            }

            // 当鼠标离开时恢复星星
            ali[i].onmouseout=function(){
                // showStar(0);
                showStar(isStar);
                // 清空p标签的内容
                p.innerHTML='';
            }
        }
        // 用来记录第几个li标签
        var isStar=0;
        // 展示星星
        function showStar(index){
            console.log(index);
            // 根据所点到的li标签显示星星的数量 
            // 比如：点到第二个星星就应该让前两个星星显示
            for(var i=0;i<ali.length;i++){
                if(i<index){
                    ali[i].className='on';
                }else{
                    ali[i].className='';
                }
            }
        }
    }
</script>